<template>
	<view>
		<up-popup :show="signInShow" overlayOpacity="0.8" :round="10" bgColor="transparent"  :safe-area-inset-bottom="false" mode="center" :closeable="false" @close="close">
			<view class="u-text-center u-bg-white u-radius-20 u-font-28">
				<view class="signIn-top">
					<image src="@/static/sign-img.png" mode="widthFix"></image>
				</view>
				<p class="u-text-center u-p-t-30">每天签到得幸运星哦！</p>
				<p class="u-text-center u-p-t-10">连续签满7天神秘大礼等你来拿</p>
				<view class="u-flex u-flex-around u-m-t-30 u-p-l-20 u-p-r-20">
					<view v-for="(day,index) in state.list" :key="day.date">
						<view class="u-light-color u-text-center u-font-24">
							<!-- 根据索引动态显示奖励 -->
							<view class="u-m-b-10" v-if="index < 6">+{{ (index + 1) * 5 }}星</view>
							<view class="u-m-b-10" v-else>神秘</view>
						</view>
						<view v-if="index < 6" class="sign-item u-font-20" :class="{'active': day.isSigned}">
							<text class="u-m-r-2">周</text>
							<text v-if="index===0">一</text>
							<text v-if="index===1">二</text>
							<text v-if="index===2">三</text>
							<text v-if="index===3">四</text>
							<text v-if="index===4">五</text>
							<text v-if="index===5">六</text>
						</view>
						<view v-else class="sign-item u-font-30" :class="{'active': day.isSigned}">
							<up-icon name="gift-fill" :color="day.isSigned?'#fff':'#f15e69'" size="24"></up-icon>
						</view>
					</view>
				</view>
				<view class="u-p-l-50 u-p-r-50 u-m-t-40">
					<view class="u-p-l-20 u-p-r-20">
						<up-divider :text="`已累计签到${continuousDays}天`" :hairline="true"></up-divider>
					</view>
				</view>
				<view class="u-p-l-40 u-p-r-40 u-p-b-40">
					<!-- 根据签到状态动态显示按钮 -->
					<up-button v-if="!hasSigned" type="error" shape="circle" plain plainFill text="点击签到" @click="signInFun"></up-button>
					<up-button v-else type="error" shape="circle" text="已签到" disabled></up-button>
				</view>
				<up-button type="success" icon="share-square" open-type="share"> 分享给好友得50幸运星</up-button>
			</view>
			<view class="u-flex u-flex-center u-m-t-50" @click="close">
				<up-icon name="close-circle" color="#fff" size="40"></up-icon>
			</view>
		</up-popup>
		<up-popup 
		:show="state.signSuccessShow" 
		overlayOpacity="0.8" 
		bgColor="transparent" 
		:round="10" 
		:safe-area-inset-bottom="false" 
		mode="center" 
		:closeable="false" 
		@close="state.signSuccessShow=false">
			<view v-if="state.signInfo">
				<view class="u-flex u-flex-middle">
					<image src="@/static/icon/star.png" mode="widthFix" style="width:200rpx;height: 200rpx;"></image>
				</view>
				<p class="u-text-center u-font-30 u-m-t-20 u-text-white">签到成功，获得<text class="u-font-44 u-m-l-4 u-m-r-4">{{state.signInfo.integral}}</text>幸运星</p>
				<p class="u-text-center u-font-30 u-m-t-20 u-text-white">当前共有<text class="u-font-44 u-m-l-4 u-m-r-4">{{state.signInfo.account.integral}}</text>幸运星</p>
			</view>
		</up-popup>	
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow,
		onShareAppMessage
	} from '@dcloudio/uni-app'
	import {
		onMounted,
		reactive,
		nextTick,
		computed,
		ref
	} from 'vue';
	import {
		BASE_URL,
		REQUEST_SUCCESS
	} from '/utils/config.js';
	import createApi from '/api/commonAPI.js';
	const commonAPI = createApi(store);
	import {
		useAuth
	} from '/composables/useAuth';
	import {
		useCommon
	} from '/composables/useCommon.js';
	import {
		useStore
	} from 'vuex';
	const store = useStore();
	// 计算属性，用于获取 Vuex 中的状态
	const {
		qiniuDomain,
	} = useCommon();
	const {
		token,
		user_id,
		userInfo,
		hasAuth,
		SET_SIGN,
		hasSigned,
		SET_NOT_LOGIN,
		getUserAccount
	} = useAuth();
	const props = defineProps({
		signInShow: {
			type: Boolean,
			default: false
		}
	});
	const emits = defineEmits(['close']);
	const state = reactive({
		list: [],
		signSuccessShow:false,
		signInfo:false
	})

	// 计算连续签到天数
	const continuousDays = computed(() => {
		let count = 0;
		// 从数组开头（最近一天）开始计算
		for (let i = 0; i < state.list.length; i++) {
			if (state.list[i].isSigned) {
				count++;
			}
		}
		return count;
	});
	
	// 判断今天是否已签到（根据日期判断）
	function hasSignedFun(){
		const today = new Date();
		const year = today.getFullYear();
		const month = (today.getMonth() + 1).toString().padStart(2, '0');
		const day = today.getDate().toString().padStart(2, '0');
		const todayDateStr = `${year}-${month}-${day}`;
		// 在列表中查找是否有今天已签到的记录
		const todayRecord = state.list.find(item => item.date === todayDateStr);
		// 如果找到了今天的记录并且已签到，则返回 true
		SET_SIGN(todayRecord.isSigned)
	}
	function signInFun() {
		commonAPI.signIn().then(res => {
			if (res.code == REQUEST_SUCCESS) {
				state.signInfo = res.data
				state.signSuccessShow=true
				getSignHistory()
				getUserAccount()
				uni.vibrateShort()
				setTimeout(()=>{
					state.signSuccessShow=false
				},2000)
			}
		})
	}
	function close() {
		emits('close');
	}
	onMounted(() => {
		getSignHistory()
	})

	// 获取签到记录
	async function getSignHistory() {
		await commonAPI.signHistory().then(res => {
			if (res.code == REQUEST_SUCCESS) {
				// 将对象转换为数组，并添加 isSigned 字段
				state.list = Object.keys(res.data).map(date => {
					return {
						date,
						isSigned: !!res.data[date] // 将 null 转换为 false，对象转换为 true
					};
				});
				if(state.list.length){
					hasSignedFun()
				}
			}else if(res.code == 403){
				SET_NOT_LOGIN(true)
			}
		})
	}
</script>

<style lang="scss" scoped>
	.share-txt-btn{
		background: transparent;
		border: none;
		font-size: 26rpx;
		&::after{
			display: none;
		}
	}
	.signIn-top{
		border-radius: 20rpx 20rpx 0 0;
		overflow: hidden;
		image{
			width: 100%;
		}
	}
	.sign-item{
		width: 70rpx;
		height: 70rpx;
		line-height: 70rpx;
		background: #f5f5f5;
		border-radius: 50%;
		font-weight: bold;
		margin: 0 10rpx;
		color: #999;
		display: flex;
		justify-content: center;
		align-items: center;
		&.active{
			background: #f15e69;
			color: #fff;
		}
	}
</style>